<template>
    <div class="menu">
        <van-search v-model="inputValue" placeholder="请输入搜索关键词" />
        

        <!-- 宫格 -->
        <div class="menu-box">
            <div class="single-box" v-for="item in menuList" :key="item.id">
                <img :src="item.image" @click="toMenuDetail(item.id)">
                <span>{{ item.title }}</span>
                <em><van-icon name="eye-o"/>{{item.person}}人看过</em>
            </div>
        </div>
    </div>
</template>


<script setup>
import { computed, ref } from 'vue'
import { useStore} from 'vuex' 
import { useRouter } from 'vue-router'

let inputValue = ref('')
let store = useStore()
let router = useRouter()

let menuList = computed(()=>{
    return  store.getters['menuModule/getMenuItem']
})

// onMounted(()=>{
//     console.log(store);
//     console.log(menuList.value);
// })
function toMenuDetail(id){
        router.push('/menuDetail')
        store.commit('menuModule/addMenuDetail',id)
}



</script>


<style lang="less" scoped>
@import "../../style/common.less";
.menu{
    background: @g3;
    min-height: 570px;
}
    .menu-box{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        >.single-box{
            background: @g1;
            width: 45%;
            height: 220px;
            padding: 10px;
            margin: 5px;
            border-radius: 8px;
            >img{
                display: block;
                width: 100%;
                height: 70%;
                border-radius: 8px;
                border: 1px solid @g7;
                margin-bottom: 4px;
            }
            >span{
                display: block;
                border-top: 1px solid @g8;
                line-height: 40px;
                text-align: center;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            >em{
                color: @g7;
                font-size: .7rem;
                float: right;
            }
        }
    }
</style>